<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" class="bg-[#d9ecff]">
        <div class="flex items-center h-12 justify-center border-b border-[#eeeeee] drag">
          <img class="h-10" src="/@/assets/icon.png" alt="" />
          <div>Electron APP</div>
        </div>
      </el-aside>
      <el-container class="h-screen">
        <el-header class="flex items-center bg-[#c6e2ff]" height="48px">
          <div class="flex-1 h-full drag"></div>
          <div class="flex h-full gap-5">
            <ep-svg name="min" class="w-6 cursor-pointer" @click="handleMin" />
            <ep-svg
              :name="isMaximized ? 'restore' : 'max'"
              :class="[isMaximized ? 'w-4' : 'w-5', 'cursor-pointer']"
              @click="handleToggleWinSize"
            />
            <ep-svg name="close" class="w-4 cursor-pointer" @click="handleClose" />
          </div>
        </el-header>

        <el-container>
          <el-main class="bg-[#ecf5ff]">
            <div class="flex flex-col items-center justify-center w-full h-full items-cecenter">
              <h1 class="text-2xl font-bold">HelloWorld</h1>

              <ul class="flex gap-4">
                <li>
                  <router-link to="/demo">链接跳转demo页</router-link>
                </li>
                <li>
                  <a @click="goto">点击事件跳转demo页</a>
                </li>
              </ul>

              <p>count:{{ count }}</p>
              <p>double:{{ doubleCount }}</p>
              <el-button type="primary" @click="increment">增加</el-button>
            </div></el-main
          >
          <el-footer class="bg-[#c6e2ff]">Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
  import { useCounterStore } from '/@/store/modules/counter'
  import { app, getCurrentWindow } from '@electron/remote'
  const userStore = useCounterStore()
  const { count, doubleCount } = storeToRefs(userStore)
  const { increment } = userStore
  const router = useRouter()
  const goto = () => {
    router.push('/demo')
  }

  // 获取当前窗口实例
  const win = getCurrentWindow()
  const isMaximized = ref(win.isMaximized())
  //窗口最小
  const handleMin = () => {
    win.minimize()
  }

  const handleToggleWinSize = () => {
    if (unref(isMaximized)) {
      isMaximized.value = false
      win.restore()
    } else {
      isMaximized.value = true
      win.maximize()
    }
  }

  const handleClose = () => {
    app.quit()
  }

  // 窗口最大化时触发
  win.on('maximize', () => {
    console.log('窗口最大化')
    isMaximized.value = true
  })

  // 窗口从最大化状态退出时触发
  win.on('unmaximize', () => {
    console.log('窗口最小化')
    isMaximized.value = false
  })
</script>

<style scoped lang="less">
  .drag {
    // 窗口拖拽
    -webkit-app-region: drag;
  }

  .no-drag {
    -webkit-app-region: 'no-drap';
  }

  .read-the-docs {
    color: #888;
  }

  .box {
    color: pink;
    background-color: #000;

    &_head {
      color: red;
      background-color: pink;
    }
  }
</style>
